<template>
    <div id="yhgl" class="container-fluid padding">
        <form class="layui-form layui-form-pane" action="">
            <fieldset class="layui-elem-field">
                <legend>用户管理</legend>
                <div class="layui-field-box" id="config">
                    <el-form :model="user" ref="user" label-width="100px" class="padding">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="user.username" style="width: 300px;"></el-input>
                        </el-form-item>
                        <el-form-item label="原密码" prop="oldpassword">
                            <el-input v-model="user.oldpassword" style="width: 300px;"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="password">
                            <el-input v-model="user.password" style="width: 300px;"></el-input>
                        </el-form-item>
                        <el-form-item label="选择坐席" prop="zuoxi">
                            <el-select v-model="user.zuoxi" style="width: 300px;">
                                <el-option v-for="item in zuoxiOption" v-bind:key="item.id" v-bind:value="item.number" >{{item.number}}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="save()">保存</el-button>
                            <el-button @click="resetForm('user')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </fieldset>
        </form>
    </div>
</template>
<script>
    export default {
        name: "yhgl",
        updated: function(){
            this.$nextTick(function () {//赋值后vue渲染，渲染完成后就layui渲染
                if (this.updateUser && this.updateZuoxi){
                    layer.close(this.index);
                }
            });
        },
        mounted: function(){
            this.$nextTick(function () {
                //查询坐席
                this.$post('cti-manager-zuoxi/list?page=1&limit=-1',{})
                    .then((response) => {//这里使用了ES6的语法
                        if (response.data){
                            this.zuoxiOption = response.data.data;
                            this.updateZuoxi = true;
                        }
                    }).catch((response) => {
                    consoleLog(response)
                });
            });
        },
        data() {
            return {
                index:"",
                updateUser:false,
                updateZuoxi:false,
                user:{
                    oldUsername:this.$cache_.getCookie("user"),
                    username:this.$cache_.getCookie("user"),
                    password_hash:"",
                    zuoxi:this.$cache_.getCookie('zuoxi'),
                },
                zuoxiOption: [
                ],
            }
        },
        methods: {
            save:function () {
                this.$post('site/saves',{user:this.user})
                    .then((response) => {//这里使用了ES6的语法
                        if (response.data.res==1){
                            this.$cache_.setCookie('user',this.user.username,3600*24*30);
                            this.$cache_.setCookie('zuoxi',this.user.zuoxi,3600*24*30);
                            $('#header_ygmc').text('├─员工名称： '+this.user.username)
                            $('#header_ygzx').text('├─员工坐席： '+this.user.zuoxi)
                            this.user.oldUsername = this.user.username;
                            this.$message({message:"保存成功！",type:"success"})
                        }else{
                            this.$message({message:"保存失败！"+response.data.data[0],type:"error"})
                        }
                    }).catch((response) => {
                    consoleLog(response)
                });
            }
        }
    }
</script>